<template>
  <div class="music_container">
    <action-sheet></action-sheet>

    <search 
      v-show="!blurBgShow"
      @searchShow="rankShow = false"
      @searchHide="rankShow = true">
    </search>

    <div class="content_wrapper"
      v-show="rankShow && !blurBgShow">
      <rank></rank>
    </div>

    <transition name="page">
      <router-view v-show="!blurBgShow"></router-view>
    </transition>

    <transition name="bar-slide">
      <div id="play_bar" v-show="!playPageShow">
        <div class="play_bar_image_container"
          @click="showPlayPage"
          @touchstart.prevent="showPlayPage">
          <img v-lazy="coverImgUrl">
          <p class="play_bar_text">{{ song.name }}</p>
        </div>
        <img :src="playing? iconPause : iconPlay" 
          class="play_bar_button"
          @click.prevent="playingToggle"
          @touchend.prevent="playingToggle">
      </div>
    </transition>

    <transition name="play-page" 
      @after-enter="showBlurBg" 
      @before-leave="hideBlurBg">
      <play v-show="playPageShow"></play>
    </transition>
    <transition name="play-page">
      <playing-list v-if="show"></playing-list>
    </transition>
  </div>
</template>

<script>
import Search from './ChildPage/Search/Search'
import Rank from './ChildPage/Rank/Rank'
import Play from './ChildPage/Play/Play'
import PlayingList from './ChildPage/Play/PlayingList'
import ActionSheet from '../subcomponents/ActionSheet'

import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  name: 'music',
  components: {
    Search,
    Rank,
    Play,
    PlayingList,
    ActionSheet
  },
  data() {
    return {
      rankShow: true,
      playPageShow: false,
      blurBgShow: false,
      iconPlay: require('../../../static/images/icon-play.png'),
      iconPause: require('../../../static/images/icon-pause.png'),
    }
  },
  methods: {
    showPlayPage() {
      this.playPageShow = true
    },
    showBlurBg() {
      this.blurBgShow = true
    },
    hideBlurBg() {
      this.blurBgShow = false
    },
    playingToggle() {
      this.playing ? this.pause() : this.play()
    },
    ...mapMutations([ 'play', 'pause', 'playContinue' ])
  },
  computed: {
    ...mapState({
      show: state => state.NotifyService.playing.show,
      actionSheet: state => state.NotifyService.actionSheet,
      song: state => state.PlayService.song,
      playing: state => state.PlayService.playing
    }),
    ...mapGetters([ 'coverImgUrl' ])
  }
}
</script>

<style lang="less" scoped>

  .music_container {
    width: 100%;
    height: 100%;
    .content_wrapper {
      margin-top: 60px;
      margin-bottom: 50px;
    }
    #play_bar {
      width: 100%;
      max-width: 68vh;
      height: 50px;
      position: fixed;
      bottom: 50px;
      z-index: 2;
      background: -webkit-linear-gradient(top, #f9f9f9, #f3f3f3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .play_bar_image_container {
        flex: 1;
        margin-left: 15px;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 37.5px;
          height: 37.5px;
          border-radius: 5px;
          -webkit-user-drag: none;
        }
        .play_bar_text {
          font-size: 16px;
          color: #000;
          margin: 0;
          margin-left: 10px;
        }
      }
      .play_bar_button {
        width: 20px;
        height: 20px;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }

  .page-enter {
    transform: translateX(100%);
  }
  .page-leave-to {
    opacity: 0;
  }
  .page-enter-active {
    transition: all .3s ease;
  }
  .page-leave-active {
    transition: all .3s ease-out;
  }

  .play-page-enter,
  .play-page-leave-to {
    transform: translateY(100vh);
  }
  .play-page-enter-active {
    transition: all .3s ease;
  }
  .play-page-leave-active {
    transition: all .3s ease-out;
  }

  .bar-slide-enter,
  .bar-slide-leave-to {
    transform: translateY(50px);
  }
  .bar-slide-enter-active {
    transition: all .3s ease;
  }
  .bar-slide-leave-active {
    transition: all .3s ease-out;
  }
</style>
